<script setup>
import axios from "axios";
import * as echarts from "echarts";
import {markRaw, onMounted, ref} from "vue";
import geo from '../assets/geo.json'

const geoCharts = ref()
const myChart = ref()
const option = ref({})
const data = ref()
const init = async () => {
  echarts.registerMap('ZG', geo)
  await axios.get('http://127.0.0.1:5000/geo').then(res => {
    console.log(res.data)
    data.value = res.data
  })
  myChart.value = markRaw(echarts.init(geoCharts.value));
  draw();
}
const draw = () => {
  option.value = {
    baseOption: {
      timeline: {
        //loop: false,
        axisType: 'category',
        show: true,
        autoPlay: true,
        playInterval: 3000,
        data: data.value.year
      },
      title: {
        text: '',
        textStyle:
            {
              color: '#000000'
            }
      },
      tooltip: {
        trigger: 'item'
      },
      visualMap: {
        min: 0,
        max: 130000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
        },
        left: '10%',
        bottom:'4%',
        textStyle:{
          color:'#ffffff'
        }
      },
      series: {
        name: '地区生产总值',
        type: 'map',
        map: 'ZG',
        label: {
          // show: true,
          textStyle: {
            color:'#ffffff'
          }
        }
      }
    },
    options: data.value.data.map((value, index) => {
      return {
        series: {
          data: value,
        }
      }
    })
  }
  myChart.value.setOption(option.value, {notMerge: true});
}
onMounted(() => {
  init()
})

</script>

<template>
  <div class="geo" ref="geoCharts"></div>
</template>

<style scoped>
.geo {
  width: 100%;
  height: 100%;
}
</style>